<template>
	<el-card>
		<!-- 搜索 -->
		<el-form :model="searchData" inline ref="searchFormRef" v-resize="searchResize" label-width="70px">
			
			<el-form-item>
				<el-button icon="el-icon-arrow-left" @click="backClick()">返回</el-button>
			</el-form-item>
		</el-form>


		<!-- 班级卡片 -->
		<!-- 标题颜色 -->
		<el-card class="card-block" style="flex: 1;min-width: 550px;margin-right: 10px; color: #409EFF" header="班级列表" >
			<div style="display: flex;flex-wrap: wrap;  ">
				
				<div v-for="(item,index) in classList" style="width: 100px;padding: 50px 80px;text-align: center;display: flex;justify-content: center;  ">
					<!-- 文字+图标 -->
					<div style="text-align: center; ">
						
						<!-- 图标颜色 图标的边框-->
						<div   @dblclick="linkToStudent(item.id)"   style="display: flex; 
						align-items: center;    
                        justify-content: center;    
                        width: 100px;height: 100px;border-radius: 8px;
						" >
							<i class="el-icon-office-building" style="font-size: 80px;"></i>
						</div>
						<!-- 字体样式 -->
						<div style="color: #333;font-size: .875rem;font-weight: 400;line-height: 1.5715">
							{{item.className}}
						</div>

					</div>
				</div>
			</div>
		</el-card>
	</el-card>
</template>

<script>
	export default {

		data() {
			return {

				//弹出框的显示
				dialogVisible: false,


				//搜索条件
				searchData: {
					studentName: null,
				},

				
				
				//幼儿园对应的班级列表
				classList:[]
			};
		},
		mounted() {
			this.$nextTick(() => {
				//this.$refs.tableRef.shuaxin(this.searchData);
				this.getClassList();
			});

			

		},
		methods: {

           //跳转至学生图片列表
			linkToStudent(classId){
				this.$router.push({
					path: '/student_picture',
					query:{
						classId:classId
					}
				})
			},

			//获取幼儿园对应的班级列表
			getClassList() {
                let kgId = this.$route.query.kgId
				this.$api.sysClassFindByKgId(kgId).then(data => {
					this.classList = data;
				}); 
			},

			
			//搜索重置
			searchResize(data) {
				//this.$refs.tableRef.refreshSize(data)
			},

			

			//搜索按钮
			searchClick() {
				//this.$refs.tableRef.shuaxin(this.searchData)
			},

			//返回上一页
			backClick(){
				this.$router.back()
			},
		},
	};
</script>

<style lang="scss" scoped>
</style>
